import 'package:flutter/material.dart';
import 'package:fsharing/core/models/account.dart';
import 'package:fsharing/core/viewmodels/pages/mine/account_list_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/main.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:provider/provider.dart';

class AccountPage extends StatelessWidget {
  final String category;

  AccountPage({
    Key key,
    @required this.category,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => AccountListModel(Provider.of(context, listen: false), category),
      child: BackgroundContainer(
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: Text(category == 'user' ? '我的积分' : '提现账户'),
          ),
          body: Consumer<AccountListModel>(
            builder: (context, model, child) {
              switch (model.viewState) {
                case ViewState.busy:
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                case ViewState.error:
                  return Center(
                    child: Text(model.errorMessage),
                  );
                case ViewState.success:
                  return _SuccessWidget(
                    list: model.list,
                  );
                default:
                  return Container();
              }
            },
          ),
        ),
      ),
    );
  }
}

class _SuccessWidget extends StatelessWidget {
  final List<Account> list;

  _SuccessWidget({
    Key key,
    this.list,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12),
      child: ListView.separated(
        itemBuilder: (context, index) {
          return _ListItemWidget(
            account: list[index],
          );
        },
        separatorBuilder: (context, index) {
          return Divider(
            height: 12,
            color: Colors.transparent,
          );
        },
        itemCount: list.length,
      ),
    );
  }
}

class _ListItemWidget extends StatelessWidget {
  final Account account;

  const _ListItemWidget({
    Key key,
    @required this.account,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Column(
        children: <Widget>[
          _ListItemHeaderWidget(
            account: account,
          ),
          _ListItemFooterWidget(
            account: account,
          ),
        ],
      ),
      onTap: () => _onItemClicked(context),
    );
  }

  void _onItemClicked(BuildContext context) {
    Navigator.of(context).pushNamed('/account/detail', arguments: account.id);
  }
}

class _ListItemHeaderWidget extends StatelessWidget {
  final Account account;

  const _ListItemHeaderWidget({
    Key key,
    @required this.account,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 12),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/cart/img_store.png'),
          fit: BoxFit.fill,
        ),
      ),
      height: 45,
      child: Row(
        children: <Widget>[
          Image.asset('assets/images/account/ic_account.png', width: 20),
          SizedBox(width: 6),
          Text(account.accountTypeName, style: TextStyle(fontSize: 17)),
        ],
      ),
    );
  }
}

class _ListItemFooterWidget extends StatelessWidget {
  final Account account;

  const _ListItemFooterWidget({
    Key key,
    @required this.account,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: lightTheme(),
      child: Material(
        borderRadius: BorderRadius.vertical(bottom: Radius.circular(10)),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 6, horizontal: 12),
          height: 90,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    child: Text(
                      '余额',
                      style: TextStyle(fontSize: 14),
                    ),
                  ),
                  Text.rich(
                    TextSpan(
                      text: account.balance,
                      style: TextStyle(color: Theme.of(context).accentColor, fontSize: 20),
                      children: [
                        TextSpan(text: '￥', style: TextStyle(fontSize: 15)),
                      ],
                    ),
                  ),
                ],
              ),
              Divider(height: 1),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Text(
                      account.allowWithdraw ? '提现冻结额度' : '--',
                      style: TextStyle(color: Colors.grey, fontSize: 14),
                    ),
                  ),
                  Text(
                    account.allowWithdraw ? '${account.withdrawCash}￥' : '--',
                    style: TextStyle(color: Colors.grey, fontSize: 14),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Text(
                      account.existNotArrived ? '未到账额度' : '--',
                      style: TextStyle(color: Colors.grey, fontSize: 14),
                    ),
                  ),
                  Text(
                    account.existNotArrived ? '${account.notArrivedBalance}￥' : '--',
                    style: TextStyle(color: Colors.grey, fontSize: 14),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
